<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--通常会预设多套主题样式内容-->
    <style>
        .white {
            background-color: white;
        }

        .dark {
            background-color: black;
        }
    </style>
</head>
<body class="white">
<div>
    <span style="color: #4a948c">
        <a>123</a>
        <a>123</a>
    </span>
</div>
<a>百度一下，你就知道</a>
<button id="btn01">按钮1</button>
<button onclick="white()">日间模式</button>
<button onclick="dark()">黑夜模式</button>
</body>
<script>
    /*
        DOM 模型就是指 document object model 文档对象模型，
        就指将HTML文档看作是一个对象，将HTML文档内的所有内容都加载到
        一棵document树中，后续可以通过操作树中的节点，实现对文档内容
        的增删改操作

        如果要修改文档中的某一个元素节点需要先获取这些元素的内容：
        获取标签元素的方式有以下几种：
            1、getElementById()：通过标签的id属性值获取目标标签的元素对象
            2、getElementsByClassName()：通过标签的类型名class属性中定义的值获取元素对象，
            获取的结果是符合该类型的所有元素对象
            3、getElementsByTagName()：通过标签名获取当前页面中所有叫该名字的元素对象；
            4、querySelector()： 通过元素的选择器获取元素对象，如果符合条件的元素对象有多个，
            那么本方法只会返回第一个符合条件的元素对象；
            5、querySelectorAll()： 通过元素的选择器获取元素对象，会同时以集合/数组的形式
            返回所有符合条件的元素对象
    */
    // 三秒后在页面中输出 hello world!
    /*setTimeout(() => {
        // document.write()方法能够实现在页面中输出内容
        // document.write()方法会覆盖原本页面中的数据元素，而不是拼接数据
        document.write('hello world!');
    }, 3000);*/

    // let btn = document.getElementById("btn01");
    let btn = document.querySelector('#btn01');
    // 通过标签元素对象，可以操作修改元素中所有的内容，
    // 包括但不限于样式、内容、事件
    btn.style.backgroundColor = '#0c4873';

    // 这里获取的是一个数组或集合对象
    let elementsByClassName = document.getElementsByClassName('a');
    console.log(typeof elementsByClassName)


    // 通过选择器获取标签元素
    let element = document.querySelector("div span a");
    element.innerText = "修改后的a标签内容";

    let querySelectorAll = document.querySelectorAll('div');

    /*
           思考： 网站中的切换主题样式是如何实现的？
           会先将主题样式提前进行预设，设定好对应样式的类型，
           切换主题样式本质上就是切换各个标签中class的内容，具体如下
     */
    let body = document.querySelector('body');

    function white() {
        body.classList.remove('dark');
    }

    function dark() {
        // 在类型列表中添加dark类型
        body.classList.add('dark');
        console.log(body.classList)
    }
</script>
</html>